<template>
  <div class="test-container table-data">
    <div class="test-container-header flex-space-be">
      <div class="class-name">
        <span
          >当前课程：
          {{ checkedBookData.edition_name + "-" + checkedBookData.grade_name }}
        </span>
      </div>
      <div class="header-right">
        <label>第一遍进度： </label>
        <el-progress
          :percentage="progessNum"
          :color="$store.getters.color_main"
        ></el-progress>
        <el-radio-group v-model="checkedType" @change="changeGetWord">
          <el-radio :label="1">生词({{ wordDataNum.sum_num }})</el-radio>
          <el-radio :label="0">熟词({{ wordDataNum.new_word_num }})</el-radio>
          <el-radio :label="2">剩余({{ wordDataNum.word_num }})</el-radio>
        </el-radio-group>
        <span>
          生词比：{{
            parseInt(
              (wordDataNum.sum_num /
                (wordDataNum.new_word_num +
                  wordDataNum.sum_num +
                  wordDataNum.word_num)) *
                100
            )
          }}%
        </span>
      </div>
    </div>
    <div class="info-table">
      <div class="unit-select common-select pt20 mb20">
        <span>选择单元: </span>
        <el-select
          v-model="value"
          @change="changeGetWord"
          clearable
          placeholder="请选择"
        >
          <el-option label="全部" :value="null"> </el-option>
          <el-option
            v-for="item in unitList"
            :key="item.unit_id"
            :label="item.unit_name"
            :value="item.unit_id"
          >
          </el-option>
        </el-select>
      </div>
      <div class="clear-float common-table common-pagination">
        <el-table border :data="wordData.list" style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            width="100px"
            :index="indexMethod"
          >
          </el-table-column>
          <el-table-column prop="name" label="音标">
            <template slot-scope="scope">
              <div
                class="play-click click"
                @click="playAudio('audio' + scope.row.id)"
                v-if="scope.row.phonetic"
              >
                [{{ scope.row.phonetic }}]
              </div>
              <div v-else>-</div>
              <audio
                :ref="'audio' + scope.row.id"
                :src="baseURL + scope.row.word_audio_vo_list[0].url"
              ></audio>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="单词">
            <template slot-scope="scope">
              <div
                class="table-text click"
                @click="playAudio('audio' + scope.row.id)"
              >
                {{ scope.row.name }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="词义">
            <template slot-scope="scope">
              <div>
                <p
                  v-for="(item, index) in scope.row.word_paraphrase_list"
                  :key="index"
                  class="table-text"
                >
                  <span>{{ item.word_sex }}</span>
                  <span>{{ item.paraphrase }}</span>
                </p>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="handleCurrentChange"
          class="fr"
          background
          :page-size="wordParams.pageSize"
          layout="prev, pager, next"
          :total="wordData.total_num"
          hide-on-single-page
          :current-page.sync="wordParams.pageNum"
          v-if="showPagination"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { getWordListByType } from "@/api/index";
export default {
  data() {
    return {
      checkedType: 1,
      checkedBookData: null,
      wordParams: {
        pageSize: 15,
        pageNum: 1,
      },
      wordData: {
        total_num: 0,
        list: [],
      },
      wordDataNum: {},
      value: null,
      progessNum: 0,
      totalNum: 0,
      showPagination: true,
    };
  },
  methods: {
    playAudio(refName) {
      // this.$pauseAllAudio();
      if (this.$refs[refName]) {
        this.$refs[refName].play();
      }
    },
    indexMethod(index) {
      return (
        (this.wordParams.pageNum - 1) * this.wordParams.pageSize + index + 1
      );
    },
    changeGetWord() {
      this.showPagination = false;
      this.wordParams.pageNum = 1;
      this.$nextTick(() => {
        this.showPagination = true;
      });
      this.getWordListByType();
    },
    handleCurrentChange(value) {
      this.wordParams.pageNum = value;
      this.getWordListByType();
    },
    getWordListByType() {
      let params = {
        pageSize: this.wordParams.pageSize,
        pageNum: this.wordParams.pageNum,
      };
      let data = {
        book_id: this.checkedBookData.book_id,
        number: this.checkedBookData.number,
        phonetic_category: this.$store.getters.isBritish,
        category: this.type,
        is_strange: this.checkedType,
      };
      if (this.value) {
        data.unit_id = this.value;
      }
      getWordListByType(params, data).then((res) => {
        if (res.code == 200) {
          this.wordDataNum = res.data.satistics_word_vo;
          this.wordData = res.data.word_vo_common_page;
        }
      });
    },
  },
  created() {
    this.checkedBookData = JSON.parse(localStorage.getItem("bookData"));
    let data = this.checkedBookData.word_book_vo_list.filter((item) => {
      return item.source == this.type;
    });
    if (data.length > 0) {
      this.checkedBookData.number = data[0].number;
    } else {
      this.checkedBookData.number = 1;
    }
    if (this.unitList.length > 0) {
      this.value = this.unitList[0].unit_id;
    }
    if (
      this.checkedBookData &&
      this.checkedBookData.word_book_vo_list &&
      this.checkedBookData.word_book_vo_list.length > 0
    ) {
      let totalNum = this.checkedBookData.word_book_vo_list[0].total_number;

      let studyNum = 0;
      let progressData = this.checkedBookData.word_book_vo_list.filter(
        (item) => {
          return item.source == this.type;
        }
      );
      if (progressData.length > 0) {
        studyNum = progressData[0].study_number;
      }
      this.totalNum = totalNum;
      this.progessNum = parseInt((studyNum / totalNum) * 100);
    }

    this.getWordListByType();
  },
  props: {
    type: {
      type: Number,
    },
    unitList: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
};
</script>